<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			ul{
				list-style: none;
				width: 1200px;
				margin: 0 auto;
				position: relative;
			}
			ul li{
				width: 400px;
				overflow-x: hidden;
				position: absolute;
			}
			ul li img{
				display: block;
				width: 400px;
			}
		</style>
	</head>
	<body>
		<ul id="pics">
			<li><img src="img/1.jpg"/></li>
			<li><img src="img/2.jpg"/></li>
			<li><img src="img/3.jpg"/></li>
			<li><img src="img/4.jpg"/></li>
			<li><img src="img/5.jpg"/></li>
			<li><img src="img/6.jpg"/></li>
			<li><img src="img/7.jpg"/></li>
			<li><img src="img/8.jpg"/></li>
			<li><img src="img/9.jpg"/></li>
			<li><img src="img/10.jpg"/></li>
			<li><img src="img/11.jpg"/></li>
			<li><img src="img/12.jpg"/></li>
			<li><img src="img/13.jpg"/></li>
			<li><img src="img/14.jpg"/></li>
			<li><img src="img/15.jpg"/></li>
			<li><img src="img/16.jpg"/></li>
			<li><img src="img/17.jpg"/></li>		
		</ul>
	</body>
</html>
<script type="text/javascript">
window.onload=function(){		
		setPic();
	}


	function setPic(){
		var lis=document.getElementById("pics").getElementsByTagName("li");
		
		var width=lis[0].offsetWidth;  //计算出每个里的宽度大小  不直接调用时为了后面计算
		
		// （ul/li）确定要有几列
		var count=Math.floor(document.getElementById("pics").offsetWidth/lis[0].offsetWidth);
		console.log(count);
		
		//创建一个数组  存储所有li当中的高度
		var arr=[];
		for(var i=0;i<lis.length;i++){
			var img=lis[i].getElementsByTagName("img")[0];
			console.log(img.offsetHeight);
			arr.push(img.offsetHeight);
		}
		
		
		//给第一行三张图片设置位置  同样 用数组方法去定义存储
		var Location = [];
		for(var j=0;j<count;j++){
			lis[j].style.top="0";
			lis[j].style.left=j*width+"px";
			Location[j]=lis[j].offsetHeight;
		}
		
		
		//给后面所有的li设置位置， （求出高度最短的列，把所得到的图片放在他的下面)
		for(var k=count;k<lis.length;k++){
			var min=getMinHeight(Location);  //求出高度最短的那一列
			lis[k].style.top=Location[min]+"px";
			lis[k].style.left=min*width+"px";
			lis[k].style.opacity="1";
			Location[min]=Location[min]+lis[k].offsetHeight;
		}	
		
	}
	
		
	
	
	//找出没张图片的最小高度
	function getMinHeight(arr){
		var min_index = 0;
		var min_height = arr[0];
		for(var index in arr){
			if(arr[index] < min_height){
				min_index = index;
				min_height = arr[index];
			}
		}
		return min_index;
	}
	
	
	
</script>